<template>
    <div class="stars">
        <div v-for="(item, index) in starsCount" :key="index" class="star" ref="star">

        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                starsCount: 800,// 星星数量
                distance: 800,//间距
            }
        },
        mounted() {
            let _this = this
            let startArr = _this.$refs.star
            console.log(startArr)
            startArr.forEach(item => {
                var speed = 0.2 + (Math.random() * 1);
                var thisDistance = _this.distance + (Math.random() * 300);
                item.style.transformOrigin = `0 0 ${thisDistance}px`;
                item.style.transform = `translate3d(0,0,-${thisDistance}px) rotateY(${(Math.random() * 360)}deg) rotateX(${(Math.random() * -50)}deg) scale(${speed},${speed})`;
            })
        },
        //创建前设置
        beforeCreate() {
            document.querySelector('body').setAttribute('style', 'background: radial-gradient(200% 100% at bottom center,#f7f7b6,#e96fe2,#1b2947);\n' +
                '        background: radial-gradient(220% 105% at top center,#1b2947 10%,#75517d 40%,#e96f92 65%,#f7f7b6);\n' +
                '        background-attachment: fixed;\n' +
                '        overflow: hidden;')
        },
        //销毁前清除
        beforeDestroy() {
            document.querySelector('body').removeAttribute('style')
        },
    }
</script>

<style lang="scss" scoped>
    @keyframes rotate {
        0% {
            transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
        }
        100% {
            transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
        }
    }

    .stars {
        transform: perspective(500px);
        transform-style: preserve-3d;
        position: absolute;
        perspective-origin: 50% 100%;
        left: 50%;
        animation: rotate 90s infinite linear;
        bottom: 0;
    }

    .star {
        width: 2px;
        height: 2px;
        background: #f7f7b8;
        position: absolute;
        left: 0;
        top: 0;
        backface-visibility: hidden;
    }

    .index {
        margin-left: 70px;

        .hello {
            font-size: 20px;
            color: #726f70;

            .icon-xihuan {
                font-size: 30px;
                color: #dd6572;
            }
        }

        .msg {
            .title {
                font-size: 16px;
                color: #000;
                margin-top: 20px;
                margin-left: 10px;
            }

            ul {
                display: flex;
                flex-direction: column;
                width: 200px;
                overflow: hidden;
            }

            li {
                margin-top: 10px;
                font-size: 14px;
                color: lightcoral;
                cursor: pointer;
                display: inline-block;
            }
        }
    }
</style>